<script setup>
import {List, Promotion, Menu, User} from "@element-plus/icons-vue";
import router from "@/router/index.js";

const backHomeHandler = () => {
  router.push("/");
}

</script>

<template>
  <div class="admin-home">
    <div class="admin-left-bar">
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="1" @click="router.push('/admin')">
          <el-icon><Promotion /></el-icon>
          <span>文章撰写</span>
        </el-menu-item>
        <el-menu-item index="2" @click="router.push('/admin/article/list')">
          <el-icon><List /></el-icon>
          <span>文章列表</span>
        </el-menu-item>
        <el-menu-item index="3" @click="router.push('/admin/user/center')">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="4" @click="backHomeHandler">
          <el-icon><Menu /></el-icon>
          <span>返回主页</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="admin-content">
      <router-view />
    </div>
  </div>

</template>

<style scoped>
.admin-home {
  display: flex;
  overflow: hidden; /* 禁用滚动条 */
}
.admin-left-bar {
  width: 10%;
}
.admin-content {
  flex: 1;
  padding: 30px;
  height: 100%; /* 确保内容区域高度占满剩余空间 */
  overflow-y: auto; /* 内容超出时出现垂直滚动条 */
}
.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}
</style>
